<!--
 * @Author: Zesion Lee
 * @Date: 2025-07-14 09:51:03
 * @Description: 
-->
<template>
  <div id="ShpFileBox">
    <h3>
      导入数据列表

      <a-tooltip placement="right">
        <template #title>
          <div>1.数据导入时若存在Table,数据将会被替换</div>
        </template>
        <InfoCircleOutlined />
      </a-tooltip>
    </h3>

    <div class="btnBox">
      <a-button type="primary" @click="datas.showFE = true">添加文件</a-button>
      <a-button type="primary">开始导入</a-button>
    </div>

    <div class="dataList">
      <a-table :dataSource="dataSource" :columns="columns" size="small">
        <template #bodyCell="{ column, record, index }">
          <template v-if="column.key === 'indexd'">
            {{ index + 1 }}
          </template>
          <template v-else-if="column.key === 'operation'">
            <span>移除</span>
          </template>
        </template>
      </a-table>
    </div>
  </div>

  <FileEx v-model:show="datas.showFE" type="shp" />
</template>

<script setup lang="ts">
import { shallowReactive } from 'vue'
import { InfoCircleOutlined } from '@ant-design/icons-vue'
import FileEx from '../common/FileEx.vue'

const datas = shallowReactive({
  showFE: false,
})

const props = defineProps<{ pgConfig: any }>()

const columns = [
  {
    title: '序号',
    dataIndex: 'indexd',
    key: 'indexd',
    align: 'center',
    width: '60px',
  },
  {
    title: '文件名',
    dataIndex: 'name',
    key: 'name',
    align: 'center',
  },
  {
    title: '工作区',
    dataIndex: 'name',
    key: 'name',
    align: 'center',
  },
  {
    title: '表名',
    dataIndex: 'name',
    key: 'name',
    align: 'center',
  },
  {
    title: '空间数据列名',
    dataIndex: 'name',
    key: 'name',
    align: 'center',
  },
  //   {
  //     title: '文件名',
  //     dataIndex: 'name',
  //     key: 'name',
  //     align: 'center',
  //   },
  {
    title: '操作',
    dataIndex: 'operation',
    key: 'operation',
    align: 'center',
    width: '300px',
  },
]

interface ShpRecord {
  name: string
  schema: string
  table: string
  geomCol: string
}

const dataSource = shallowReactive<ShpRecord[]>([])
</script>

<style scoped lang="less">
#ShpFileBox {
  h3 {
    span {
      cursor: pointer;
      font-size: 12px;
    }
  }
  .btnBox {
    padding: 3px;
    button {
      margin-right: 30px;
    }
  }
}
</style>
